<template>
  <div>
    <el-input :placeholder="config.placeholder||'请输入'"
              :disabled="config.disabled||false"
              clearable size="small" style="width: 50%"
              v-model="value_between_1" @input="updateValue"/>
    <el-input :placeholder="config.placeholder||'请输入'" style="margin-left: 5px;width: 50%"
              :disabled="config.disabled||false"
              clearable size="small"
              v-model="value_between_2" @input="updateValue"/>
  </div>
</template>

<script>

export default {
  name: "config-dbInput",
  props: {
    value: String,
    config: {
      type: Object,
      default: {}
    },
  },
  data() {
    return {
      value_between_1: "",
      value_between_2: ""
    }
  },
  watch: {
    'value': {
      immediate: true,
      handler(val) {
        if (val) {
          this.value_between_1 = val.split('§')[0] || '';
          if (this.value.split('§').length > 1) {
            this.value_between_2 = val.split('§')[1] || '';
          }
        }
      }
    },
  },
  methods: {
    updateValue(value) {
      this.$emit('updateValue', `${this.value_between_1}§${this.value_between_2}`);
    }
  }
}
</script>

<style scoped>

</style>
